<template>
  <div>
        <van-nav-bar
      title="发布帖子"
      right-text="发布"
      left-arrow
      @click-left="$router.go(-1)"
      @click-right=fabu
    />
    <input type="text" placeholder="请输入完整帖子标题 (5-10个字)" v-model="title" minlength="5" maxlength="10">
    <textarea class="input" type="text" placeholder="请输入正文内容(10-50个字)" v-model="content"></textarea>
    <van-uploader v-model="fileList" :after-read="afterRead" />
  </div>
</template>

<script>
import { mapState} from "vuex";
import {PublishPost} from '@/api/publish'

export default {
name:'fabuIndex',
data() {
  return {
    title:"",
    content:'',
    fileList: [],
      postImg:'',

  }
},
computed: {
    //获取存储数据
  ...mapState('user',["userInfo"])
},
methods:{
  check(){
    if(this.title.length<5){
      this.$toast('字数必须大于5')
      return
    }
    if(this.title=='' && this.content==''){
      this.$toast('输入内容不能为空')
      return
    }
  },
  fabu(){
    this.check();
    PublishPost(this.userInfo.userId,this.title,this.content,this.postImg)
    .then((res)=>{
      // console.log(res);
      // this.$toast('发布成功')
      this.$router.push('/home')
      this.$toast('发布成功')
    })
    

  },
  afterRead(file) {
    // this.fileList=[file]
    // console.log(this.fileList);
    this.postImg=file.file
    // console.log(this.postImg);
    },
}
}
</script>

<style lang="less" scoped>
.van-nav-bar{
  .van-icon{
    color: black;
  }
} 
.van-nav-bar__text{
  color: black;
}
input{
    width: 90%;
    height: 30px;
    margin-top: 15px;
    margin-left: 15px;
    border: 0;
    border-bottom: 1px solid #bcbcbc;
}
.input{
    width: 90%;
    height: 80px;
    margin-top: 15px;
    margin-left: 15px;
    border: 0;
    word-wrap:break-word;   
    resize: vertical;
}
.van-uploader{
  margin-left: 10px;
}



</style>